<template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <div v-if="crud.props.searchToggle" >
          <!-- 搜索 -->
          <el-form label-width="80px" size="small" >
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
                <el-form-item label="会议日期" prop="startDate">
                  <div class="flex flex-row">
                    <el-date-picker v-model="query.meetingStartDate" type="date" placeholder="会议开始时间" format="yyyy - MM - dd "
                      value-format="yyyy-MM-dd" style="width: 320px" />
                    <el-date-picker v-model="query.meetingEndDate" type="date" placeholder="会议结束时间" format="yyyy - MM - dd "
                      value-format="yyyy-MM-dd" style="width: 320px" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="类型" prop="type">
                  <el-select v-model="query.type" clearable class="edit-input" placeholder="请选择" style="width: 320px" >
                    <el-option v-for="(item, index) in dict.t_metting_type" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <rrOperation :crud="crud" />
          </el-form>

        </div>

        <crudOperation :permission="permission">
          <!-- <el-button slot="right" class="filter-item" size="mini" type="danger"  @click="checkwork" :disabled="crud.selections.length < 1" > 查岗 </el-button> -->
        </crudOperation>
        <el-dialog :visible.sync="show" width="500px" :before-close="onClose">
            <el-form ref="form" :model="form" label-width="100px" size="small" :disabled="true">
              <div style="display: flex;">
                <el-form-item label="创建时间" prop="createTime">
                    <el-input v-model="form.createTime" style="width: 160px;"/>
                </el-form-item>
                <el-form-item label="创建人" prop="createUserName">
                    <el-input v-model="form.createUserName" style="width: 160px;"/>
                </el-form-item>
              </div>
              <div style="display: flex;">
                <el-form-item label="会议用户" prop="meetingUserName">
                    <el-input v-model="form.meetingUserName" style="width: 160px;"/>
                </el-form-item>
                <el-form-item label="会议时间" prop="meetingTime">
                    <el-input v-model="form.meetingTime" style="width: 160px;"/>
                </el-form-item>
              </div>
              <div style="display: flex;">
                <el-form-item label="工作内容" prop="workContent">
                    <el-input v-model="form.workContent" style="width: 160px;"/>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                  <el-select v-model="form.type" clearable class="edit-input" placeholder="请选择" style="width: 160px" >
                  <el-option v-for="(item, index) in dict.t_metting_type" :key="index" :label="item.label" :value="item.value" />
                </el-select>
                </el-form-item>
              </div>
              <el-form-item label="地点" prop="location">
                  <el-input v-model="form.location" style="width: 370px;"/>
              </el-form-item>
              <el-form-item>
                <el-image v-for="item in form.photoList" :key="item.id"
                  style="width:100px"
                  :src="item.photoUrl"
                  :preview-src-list="photoList">
                </el-image>
              </el-form-item>
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
            </div> -->
        </el-dialog>
      </div>

      <div class="body-container">

        <vue-context-menu :contextMenuData="contextMenuData"
                          @tableConfig="tableConfig"
                          @deletedata="deletedata"></vue-context-menu>
        <!-- 表格配置 -->
        <el-dialog title="表格配置"
                   :visible.sync="tableConfigShow"
                   width="60%">
          <j-table-column-config :columns.sync="crud.header"  @tabSave="tabSave" @pit="pit" />
        </el-dialog>

        <!--表格渲染-->
        <el-table ref="table" stripe border
                  v-loading="crud.loading"
                  :data="crud.data"
                  size="small"
                  style="width: 100%;"
                  v-if="isShowTable"
                  @header-dragend="changeColWidth"
                  @contextmenu.native="showMenu"
                  @selection-change="crud.selectionChangeHandler"
                  @row-dblclick="detail">
          <el-table-column :render-header="crud.renderHeader" type="selection" width="60"/>
          <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('photoList')" prop="photoList" label="会议照片">
            <template slot-scope="scope" >
              <el-image v-if="scope.row.photoList" v-for="item in scope.row.photoList" :key="item.id"
                style="width: 50px; height: 50px"
                :src="item.photoUrl" />
                <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('meetingTime')" prop="meetingTime" label="会议时间" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('meetingUserName')" prop="meetingUserName" label="会议用户名称" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createTime')" prop="createTime" label="创建时间" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createUserName')" prop="createUserName" label="创建人名称" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('location')" prop="location" label="地点" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('workContent')" prop="workContent" label="工作内容" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('type')" prop="type" label="类型">
            <template slot-scope="scope">
                {{ dict.label.t_metting_type[scope.row.type] }}
            </template>
          </el-table-column>

        </el-table>
        <!--分页组件-->
        <pagination/>
      </div>
    </div>
  </template>

  <script>
  import CRUD, {crud, form, header, presenter} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import { publicListKey } from "@/utils/key";
  import {tablemixins} from "@/mixins/tablemixins";
  import { getToken } from '@/utils/auth'
  import metting from '@/api/erp/metting'
  // crud交由presenter持有
  const defaultCrud = CRUD({
    title: '会议', url: 'api/meeting',  sort: 'id,asc', crudMethod: {...metting},
    optShow: {
      add: false,
      edit: false,
      del: false,
      download: true
    },
    props: {
      tableColumns:['checkedUserCode','checkedUserName']
    }
  })
  const defaultForm = {
    createTime: "",
    createUserCode: null,
    createUserId:"",
    createUserName:"",
    id: null,
    lat: null,
    lng: null,
    location: null,
    meetingTime:"",
    meetingUserCode: "",
    meetingUserId:"",
    meetingUserName: null,
    photoList: "",
    type: "",
    workContent: null,
  }
  export default {
    name: 'metting',
    components: {pagination, crudOperation, rrOperation, udOperation,},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud(),publicListKey,tablemixins],
    dicts: ['t_metting_type'],
    data() {
      return {
        headers: { Authorization: getToken() },
        permission: {
          add: ['admin'],
          edit: ['admin', 'metting:edit'],
          del: ['admin', 'metting:del'],
        },
        show:false,
        photoList:[]
      }
    },
    watch: {
      'this.form'(n){
        this.form=n
      }
    },
    created() {

    },
    updated() {
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    methods: {
      detail(e){
        this.form=e
        this.photoList=this.form.photoList.map(item=> {return item.photoUrl})
        this.show=true
      },
      onClose(){
        this.show=false
      },
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
      },
    }
  }
  </script>

  <style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  </style>
